<template>
  <div>
    <el-card class="header">
      <div class="headerButtons all-flex all-align-items-center">
          <slot name="header"></slot>
      </div>
    </el-card>

    <el-card class="cont">
      <div class="cont-inner" >
        <slot name="cont"></slot>
      </div>

      <div class="cont-foot">
       <slot name="foot"></slot>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss">
.header {
  margin-bottom: 22px;
  text-align: right;
  .headerButtons{
    flex-wrap: wrap;
  }
  .headerItem{
    flex-basis: getWidth(360);
    margin-right: getWidth(20);
    margin-bottom: 5px;
    margin-top: 5px;
  }
  .headerItemLeft{
    white-space: nowrap;
    min-width: getWidth(80);
    flex-shrink: 0;
    flex-basis:80px;
  }
  .headerItemRight{
    flex: 1;
  }
}

.el-card{
  overflow: visible;
}
.el-card.cont{
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cont-inner{
  height: 100%;
  overflow: auto;
}

.cont-foot{
  display: flex;
  justify-content: end;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}

</style>
<style scoped lang="scss">
  .el-card.cont :deep(.el-card__body){
    //flex:1;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
</style>
